{extend name="pc/common/_base" /}

{block name="title"}
<title>MD5加密-在线MD5加密工具-MD5加密测试-{$website['title']}</title>
{/block}

{block name="keywords"}
<meta name="keywords" content="MD5加密,在线MD5加密工具,MD5加密测试,{$website['title']}">
{/block}

{block name="description"}
<meta name="description" content="{$website['title']}在线MD5加密操作.">
{/block}

{block name="style"}
<style>
    .content-box {
        width: 100%;
        margin-top: 50px;
        margin-bottom: 150px;
    }

    #cbinputbox {
        width: 100%;
        margin: 0 auto 24px;
        position: relative;
        -webkit-box-shadow: 0 1px 3px #d5d6d9;
        display: flex;
    }

    #cbinputbox #param {
        flex: 1;
        height: 72px;
        outline: none;
        border: none;
        background-color: #fff;
        padding-left: 44px;
        font-size: 16px;
    }

    #cbinputbox #calbtn {
        width: 162px;
        height: 72px;
        background-color: #00b0fe;
        color: #fff;
        text-align: center;
        font-size: 24px;
        outline: none;
        border: none;
        cursor: pointer;
    }


    #cbresultbox {
        width: 100%;
        margin: 0 auto;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
    }

    #cbresultbox table tr {
        color: #777;
        display: flex;
    }

    #cbresultbox table th {
        width: 178px;
        height: 72px;
        border-bottom: 1px solid #d5d6d9;
        border-radius: 3px;
        text-align: center;
        background-color: #fff;
        line-height: 73px;
        float: left;
    }

    #cbresultbox table td {
        flex: 1;
        height: 72px;
        border-bottom: 1px solid #d5d6d9;
        border-radius: 3px;
        position: relative;
        background-color: #fff;
        margin-left: 4px;
        float: left;
        line-height: 73px;
        padding-left: 21px;
    }

    #cbresultbox table td strong {
        width: 80px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        border: 1px solid #a4e2fe;
        color: #38bafe;
        border-radius: 16px;
        background-color: #dff4fe;
        margin-right: 24px;
    }

    #cbresultbox table td input {
        flex: 1;
        color: #333;
        border: none;
        position: relative;
        margin: 0;
        height: 30px;
    }
</style>
{/block}

{block name="main"}

<div class="editer">

    <div class="container">

        <h1 class="editer-title">MD5</h1>
        <p class="editer-info">MD5加密(大小写)</p>

        <div class="content-box">

            <div id="app" v-cloak>

                <div id="cbinputbox">
                    <input id="param" type="text" name="param" placeholder="在这里输入要加密的字符" v-model="text" v-on:input="doMd5"><input type="button" id="calbtn" value="加 密" @click="doMd5()"><span id="del"></span>
                </div>

                <div id="cbresultbox">
                    <table>
                        <tbody>
                        <tr>
                            <th>16位加密</th>
                            <td class="flex-center"><strong>大写</strong><input readonly="readonly" type="text" style="background-color: rgb(255, 255, 255);" v-model="upcase16"></td>
                            <td class="flex-center" style="border-right:1px solid #eceef1;"><strong>小写</strong><input readonly="readonly" type="text" style="background-color: rgb(255, 255, 255);" v-model="locase16"></td>
                        </tr>
                        <tr>
                            <th>32位加密</th>
                            <td class="flex-center"><strong>大写</strong><input readonly="readonly" type="text" style="background-color: rgb(255, 255, 255);" v-model="upcase32"></td>
                            <td class="flex-center" style="border-right:1px solid #eceef1;"><strong>小写</strong><input readonly="readonly" type="text" style="background-color: rgb(255, 255, 255);" v-model="locase32"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>

        </div>

        <div class="recommend-box">
            {include file='pc/common/app'}
        </div>

    </div>
</div>


{/block}

{block name="script"}
<script>
    require(['vue', 'md5'], (Vue, md5) => {
        new Vue({
            el: '#app',
            data: {
                text: '',
                locase16: null,
                upcase16: null,
                upcase32: null,
                locase32: null,
            },
            methods: {
                doMd5() {
                    console.log(12345)
                    let str = md5(this.text);
                    this.locase16 = str.substr(8, 16).toLowerCase();
                    this.upcase16 = str.substr(8, 16).toUpperCase();
                    this.upcase32 = str.toUpperCase();
                    this.locase32 = str.toLowerCase();
                }
            }
        });
    });
</script>
{/block}